<template>
  <div>
    <div class="search_box">
      <el-form
        :inline="true"
        ref="ruleFormRef"
        :model="formData"
        @submit.prevent
      >
        <el-form-item label="小程序名称">
          <el-input
            v-model="formData.name"
            placeholder="小程序名称"
            @clear="getList(1)"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="getList(1)"
            v-auth="'api:agent:apps:search'"
            >查 询</el-button
          >
          <span
            style="margin: 0 12px; color: #666"
            v-auth-all="['api:agent:apps:search', 'api:agent:apps:add']"
            >|</span
          >
          <el-button
            type="primary"
            @click="addMovie"
            v-auth="'api:agent:apps:add'"
          >
            <el-icon style="margin-right: 5px">
              <Plus />
            </el-icon>
            新 增
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table_box_wrapper">
      <div class="allocation_app">
        <!-- <el-button
          type="primary"
          :disabled="isDisabled"
          @click="handleAllocation('分销商')"
          v-auth="'api:agent:apps:setAgentApp'"
        >
          分配分销商小程序
        </el-button> -->
        <el-button
          type="primary"
          :disabled="isDisabled"
          @click="handleAllocation('用户')"
          v-auth="'api:agent:apps:setUserApp'"
        >
          分配用户小程序
        </el-button>
      </div>
      <custom-table
        :loading="loading"
        :columns="columns"
        :tableData="tableData"
        :pageObj="pageObj"
        @sizechange="sizechange"
        @currentChange="currentChange"
        :typeSelect="true"
        @selectionChange="selectionChange"
        class="table_box"
      >
        <template #operator="{ scope }">
          <span
            class="operationClick isBlock"
            @click.stop="setTemplate(scope.row)"
            v-auth="'api:agent:apps:setTemp'"
          >
            设置充值模板
          </span>
          <!-- <span
            class="operationClick isBlock"
            @click.stop="handleEdit(scope.row)"
            v-auth="'api:agent:apps:update'"
          >
            编辑小程序
          </span>
          <span
            class="operationClick isBlock"
            @click.stop="handleDelete(scope.row)"
            v-auth="'api:agent:apps:delete'"
          >
            删除
          </span> -->
        </template>
      </custom-table>
    </div>

    <!-- 新增编辑信息 -->
    <infoDialog ref="infoRef" />

    <!-- 设置模板 -->
    <appsTemplate ref="setTemplateRef" @success="getList(1)" />

    <!-- 分配小程序 -->
    <userDialog ref="allocationRef" @success="getList(1)" />
  </div>
</template>

<script setup lang="ts">
import customTable from "@/components/CustomTable/index.vue";
import infoDialog from "./components/infoDialog.vue";
import appsTemplate from "./components/appsTemplate.vue";
import userDialog from "@/components/UserDialog/index.vue";

import { getAppList, appsDelete } from "@/api/globalManage/appletRoute/index";
import { reactive, ref } from "vue";
import { Plus } from "@element-plus/icons-vue";

const loading = ref<boolean>(false);
const tableData = ref<Array<any>>([]);
const selectionData = ref<Array<any>>([]);
const formData = reactive({
  pageNo: 1,
  pageSize: 10,
  name: "",
});
interface modelPage {
  pageNo: number;
  pageSize: number;
  total: number;
}
const pageObj = reactive<modelPage>({
  pageNo: 1,
  pageSize: 10,
  total: 0,
});

const columns = reactive([
  { prop: "id", label: "Id", minWidth: 80 },
  {
    prop: "appType",
    label: "小程序类型",
    minWidth: 100,
    formatter: (row: Record<string, any>) => {
      return `${
        row.appType === "wx"
          ? "微信小程序"
          : row.appType === "dy"
          ? "抖音小程序"
          : ""
      }`;
    },
  },
  { prop: "appName", label: "小程序名称", minWidth: 120 },
  { prop: "appId", label: "小程序AppId", minWidth: 160 },
  { prop: "appGhId", label: "小程序原始Id", minWidth: 150 },
  { prop: "pathIndex", label: "小程序首页路径", minWidth: 150 },

  { prop: "operator", slotName: "operator", label: "操作", width: 120 },
]);

const isDisabled = computed(() => {
  return selectionData.value.length > 0 ? false : true;
});

// 分配小程序
const allocationRef = ref();
const handleAllocation = (val: string) => {
  allocationRef.value.showDialog(val, selectionData.value);
};

const getList = (val = 0) => {
  // if (!val) {
  //   formData.pageNo = pageObj.pageNo;
  //   formData.pageSize = pageObj.pageSize;
  // } else {
  //   formData.pageNo = pageObj.pageNo = val === 1 ? val : 1;
  //   formData.pageSize = pageObj.pageSize = val === 1 ? 10 : pageObj.pageSize;
  // }
  formData.pageNo = pageObj.pageNo;
  formData.pageSize = pageObj.pageSize;

  loading.value = true;
  getAppList(formData)
    .then((res: Record<string, any>) => {
      tableData.value = res.data;
      pageObj.total = Number(res?.total);
    })
    .finally(() => {
      loading.value = false;
    });
};

// 设置模板
const setTemplateRef = ref();
const setTemplate = (val: Record<string, any>) => {
  setTemplateRef.value.showDialog(val);
};

// 新增
const infoRef = ref();
const addMovie = () => {
  infoRef.value.showDialog();
};
// 编辑
const handleEdit = (val: Record<string, any>) => {
  infoRef.value.showDialog(val);
};

// 删除
const handleDelete = (val: Record<string, any>) => {
  ElMessageBox.confirm("确认删除这条数据吗?", "提醒", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      appsDelete(val.id).then(() => {
        ElMessage.success("删除成功");
        getList(1);
      });
    })
    .catch(() => {});
};

// 多选
const selectionChange = (val: any) => {
  selectionData.value = val;
};

const currentChange = (val: number) => {
  pageObj.pageNo = val;
  getList();
};

const sizechange = (val: number) => {
  pageObj.pageSize = val;
  getList(2);
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.table_box_wrapper {
  margin-top: 15px;
  background-color: #fff;

  .allocation_app {
    padding: 12px 0 5px 10px;
  }
}

.table_box {
  padding: 10px;
  border-radius: 4px;

  .movie_box {
    display: flex;
    align-items: center;

    img {
      width: 72px;
      height: 108px;
      margin-right: 12px;
    }
  }
}
</style>
